<template>
  <div id="app">
    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>
      </tr>
      <!-- 循环渲染的元素tr -->
      <!-- <tr>
        <td>1</td>
        <td>车名</td>
        <td>2020-08-09</td>
        <td>
          <button @click="del(index)">删除</button>
        </td>
      </tr> -->
      <tr v-for="(item,index) in list" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.time}}</td>
        <td>
          <button @click="del(index)">删除</button>
        </td>
      </tr>
      <tr>
        <td v-show="list.length==0" colspan="4">没有数据咯~</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'VuecliDemoApp',

  data() {
    return {
      // isOk:false
      list:[
		  {id:1,name:'奔驰',time:'2020-8-1'},
		  {id:2,name:'宝马',time:'2020-8-2'},
		  {id:3,name:'奥迪',time:'2020-8-3'},
		  
	  ],
    };
  },

  mounted() {
    
  },

  methods: {
    del(num){
       this.list.splice(num, 1);
    }
  },
};
</script>

<style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
